import Vue from 'vue';
import ElementUI from 'element-ui';
import App from './App.vue';
import store from './store';
import axios from './axios';
import viewComponents from './components/common';
import router from './router';

// 导入ElementUI
import 'element-ui/lib/theme-chalk/index.css';
// 导入font-awesome(导入就可以直接用了)
import 'font-awesome/scss/font-awesome.scss';


Vue.config.productionTip = false; //  关闭生产环境的提示
Vue.prototype.$axios = axios;
Vue.use(ElementUI);

// 注册common组件
Object.keys(viewComponents)
  .forEach(componentName => {
    Vue.component(componentName, viewComponents[componentName]);
  });

// new 一个 vue 实例
new Vue({
  store,
  router,
  render: (h) => h(App), // 渲染 App.vue
}).$mount('#app'); // 将内容挂载到 id 为 app 的标签下

// 这个文件是此项目的入口文件，在app运行项目的时候，先从这个文件开始执行；
// 首先引入vue、App.vue文件和Vue-router配置文件；
// 然后修改vue的默认配置，如果不修改这个配置，每次启动项目的时候，就会出现当前是生产环境的提示；
// 然后new（新建）一个Vue实例，这个实例这样理解：有一个函数，调用了Vue这个函数，之后的一切操作都是在这个函数中执行的，
// 每个Vue.js应用都是通过用Vue函数创建一个新的Vue实例开始的，无一例外

// 在这个Vue实例中，还增加了一些配置，包括Vue-router和初始文件模板文件。
// render用于渲染App.vue文件，先将这个文件中的HTML元素放到当前页面上，之后再将项目的所有内容挂载到id为App的标签下，
// 项目就会自动进行路由的判断和路由组件的渲染。至此，这个项目就可以开始运行了

// 在哪里调用main.js这个文件，原本是在package.json文件中调用的，
// 但是在Vue-CLI 3.0版本中，提供了一种新的启动项目的方式，也就是之前执行的以下命令 ： npm run serve
// 其中serve指Vue-CLI的serve，它可以直接找到main.js文件，然后运行这个文件，无须手动调用
